<template>
	<div class="shop">
	    <div class="modal-backdrop" @click="close">
        <div class="modal"  @click.stop>
          <div class="modal-header">
          	<!-- <v-distpicker @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>-->
              <slot name="header">
              <!--  <h3 class="title" @click="choose">{{select}}</h3>-->
                 <div class="change">
                	<p @click="choose">{{provice}}</p>
                	<p @click="choose" v-if="!!cityValue">{{cityValue}}</p>
                	<p @click="choose" v-else>{{city}}</p>
                	<p @click="choose" v-if="!!codeValue">{{codeValue}}</p>
                	<p @click="choose" v-else>{{code}}</p>
                </div>
                <div class="close" @click="close">x</div>
               </slot>
            </div>
            <div class="modal-body">
            	  <div class="divwrap" v-show="show">
				    <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
				  </div>
                <slot name="body">
                	<div class="store">                		
                		<p v-for="(item,index) in list" @click="clickShop(item)">
                		   <span>{{item.shopName}}</span><span style="margin-left: 8px;">{{item.address}}</span></p>
                	</div>
                </slot>
            </div>            
        </div>
    </div>
	</div>
</template>

<script>
import VDistpicker from 'v-distpicker'

export default {
	name: 'shop',
	components: { VDistpicker },
	/*props: {
		shopList: {
			type: Array,
			default: ''
		}
	},*/
	data() {
		return {
			list:[],
			show:false,
            select:'根据地区查询店铺'	,
            provice:'省',
            city:'市',
            cityValue:'',
            codeValue:'',
            code:'区'
		}
	},
	mounted() {
      //this.getShopList()     
      this.getShop()
	},
	methods: {
		//根据城市获取所在店铺
		getShop () {
			 let reqUrl = this.$store.state.reqUrl;
			 let axios = this.$http.get;
			 let _this = this;
	/*		 let address = this.address;*/
			 var geolocation = new BMap.Geolocation();
			 let latitude = ""
			 let longitude = ""
			 geolocation.getCurrentPosition(function(r){
				var adds =r.point;
				latitude = adds.lat,
				longitude  = adds.lng;	
				//console.log(latitude,longitude)
				if(this.getStatus() == BMAP_STATUS_SUCCESS){
					axios(reqUrl+'/shops/info/byCity/?ak=nrkIxPAMfG2kBsQ8d9U6THUAlyL3T3tM&location='+latitude+','+longitude, {				
					}).then(function(res) {
				      	 _this.list  = res.data
					})
				}else {
					alert('定位失败');
				}        
			},{enableHighAccuracy: true})//指示浏览器获取高精度的位置，默认false
		},
		//门店接口
		getShopList (code) {
			this.$http.get(this.$store.state.reqUrl + '/shops/info/byCity/?areaCode='+code, {}).then(res => {
			if(res.status == 200) {
				this.list = res.data;				
			  }
		   })
		},	
		//选择店铺
		clickShop (item) {
			this.$emit("chooseShop",item);
			this.$emit('close',false);
		},
		//关闭模态框
		close() {
			this.$emit('close',false);
			this.show = false;
		},
		 choose(){
          this.show= true
         },
		 onChangeProvince(val){
		 	//console.log(val)
		 	if(val.code != "" || val.code != null || val.code != undefined){
		 	  // this.select = val.value;
		 	   this.provice = val.value
	           this.getShopList(val.code)
	           this.show = false
	           this.cityValue = ''
	           this.codeValue = ''
		 	}
	      },
	      onChangeCity(val){
	      	if(val.code == undefined || val.code == null || val.code == "") {
	      		console.log(1)
	      	}else{
	      		// this.select = val.value;  
	      		 this.cityValue = val.value
	             this.getShopList(val.code)	
	             this.show = false
	             this.codeValue = ''
	      	}
	      },
	      onChangeArea(val){
	      	if(val.code == undefined || val.code == null || val.code == "") {
	      		console.log(2)
	      	}else{
	      		//this.select = val.value;  
	      		this.codeValue = val.value
                this.getShopList(val.code)
                this.show = false
	      	}
	            this.show=false
	      }    	
	},
	wathc () {
		
	}
}
</script>

<style scoped>
	  .modal-backdrop {
	 	position: absolute;
	 	top: 0;
	 	right: 0;
	 	bottom: 0;
	 	left: 0;
	 	z-index: 88;
	 	background-color: rgba(0, 0, 0, .6);
	 	display: flex;
        justify-content: center;
        align-items: center; 
	 }
	 
	 .modal {
	 	background-color: #fff;
        box-shadow: 2px 2px 20px 1px;
        border-top-right-radius: 22px;
        border-top-left-radius: 22px;
        overflow-x:auto;
        display: flex;
        flex-direction: column;
	 	position: fixed;
	 	top: 300px;
	 	bottom: 0;
	 	left: 0;
	 	right: 0;
	 	width: 100%;
	 }
	 .modal-header {
	 	display: flex;
	 	width: 100%;
	 	height: 100px;
	 	border-bottom: 1px solid gainsboro;
	 	background: #FFFFFF;
	 	position: fixed;
	 	left: 0;
	 	z-index: 88;
	 }
	 
	 .title {
	 	flex: 1;
	 	text-align: center;
	 	line-height: 105px;
	 }
	 .change{
	 	flex: 1;
	 	text-align: center;
	 	display: flex;
	 }
	 .change p{
	 	flex: 1;
	 	line-height: 105px;
	 	font-size: 30px;
	 }
	 .close {
	 	position: absolute;
	 	right: 35px;
	 	font-size: 44px;
	 	line-height: 100px;
	 	color: dimgrey;
	 }
	 
	 .modal-body {
	 	overflow-y: auto;
	 	margin-top: 120px;
	 	height: 100%;
	 }
	 
	 .store {
	 	margin-left: 15px;	 	
	 }
	 
	.store p {
	 	margin-bottom:30px;
	 	line-height: 45px;
	 	font-size: 28px;
	 }
	 .divwrap{	
	 	position: relative; 	
	 	z-index: 88;
	 	height: 100%;
	 }
   .distpicker{
   	position: absolute;
 	width:100%;
 	height: 100%;
   }
  .distpicker-address-wrapper{
 	font-size: 28px;
 	color: #000000;
   }
   .address-container{
   	 padding-bottom: 150px;
   	 height: 100%;
   }
</style>